<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['column']">

      <view class="text-34 content" style="gap: 50rpx">
        <view class="flex-column gap-8 agent-card">
          <!-- 商家名称和settings-->
          <view class="flex-center text-36 gap-20">
            <view>ID</view>
            <view style="font-size: 40rpx">{{ userInfo.agent.id }}</view>
          </view>

          <view class="flex-center gap-20">
            <image style="width: 44rpx; height: 44rpx;" :src="`/static/agent/agent.svg`"/>
            <view style="font-size: 46rpx">{{ userInfo.agent.name }}</view>
          </view>

          <view class="flex-center gap-20">
            <u-icon name="phone" size="44rpx" color="#fff"/>
            <view>{{ userInfo.agent.phone }}</view>
          </view>

          <view class="flex-center gap-20">
            <view style="align-self: flex-start;">
              <u-icon name="map" size="44rpx" color="#fff"/>
            </view>
            <view>{{ userInfo.agent.address }}</view>
          </view>
        </view>

        <!-- 常用功能-->
        <view :class="['bg-white padding-30 radio-20',locale]">
          <view class="margin-bottom-20 common-title">{{ lang.commonFunctions.title }}</view>
          <view class="flex-center wrap" style="row-gap: 30rpx">
            <view v-for="(item, index) in agentFunctions" :key="index" @click="navigator(item.path)"
                  style="width: 25%;" class="column-center gap-20" hover-class="hover">
              <image style="width: 90rpx; height: 90rpx;" :src="item.icon"/>
              <view :class="['common-icon-text']">{{ lang.commonFunctions[item.title] }}</view>
            </view>
          </view>
        </view>


        <!-- 常用功能-->
        <!--        <view class="bg-white padding-30 radio-20">-->
        <!--          <view class="text-36" style="margin-bottom: 10rpx;">{{ lang.moreServices['title'] }}</view>-->
        <!--          <view class="flex-center wrap gap-30">-->
        <!--            <view v-for="(item, models) in help" :key="models">-->
        <!--              <view class="padding-20 column-center gap-8" hover-class="hover" style="padding: 18rpx">-->
        <!--                <u-icon :name="item.name" :size="34"/>-->
        <!--                <view>{{ item.title }}</view>-->
        <!--              </view>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </view>-->

      </view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {mapState} from "vuex";

export default {
  components: {NavBar},
  data() {
    return {
      agentFunctions: [
        {title: 'withdrawals', icon: '/static/icon/store/withdrawals.svg', path: `/pages/Agent/Income`},
        // {title: 'addStore', icon: '/static/agent/addStore.svg', path: `/pages/Agent/Store/AddStore`},
        {title: 'storeManage', icon: '/static/agent/store.svg', path: `/pages/Agent/Store/Stores`},
        {title: 'deviceManage', icon: '/static/agent/device.svg', path: `/pages/Agent/Machines`},
      ],

      help: [
        {name: 'question-circle', title: '常见问题', path: ``},
        {name: 'server-man', title: '联系客服', path: ``},
        {name: 'bag', title: '购买设备', path: ``},
        {name: 'error-circle', title: '其他内容', path: ``}
      ]
    };
  },
  computed: {
    ...mapState(["userInfo"]),
    lang() {
      return this.$t('agentPages.agent')
    },
  },
  methods: {
    navigator(path) {
      if (path) {
        uni.navigateTo({url: path})
      }
    }
  }
}
</script>

<style lang="scss">
.agent-card {
  color: #FFFFFF;
  background-color: $u-primary;
  padding: 30rpx;
  border-radius: 24rpx;

  &_title {
    color: #FFFFFF;
    font-size: $uni-font-size-title;
  }
}
</style>
